<template>
  <el-card
    class="dept-group-overview work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 12px); padding: 10px 15px 0;"
  >
    <div class="dept-group-overview__header work-bench-department__card__header">
      <span class="work-bench-department__card__title dept-group-overview__title">班组概况</span>
    </div>
    <div class="work-bench-department__card__body dept-group-overview__body">
      <el-carousel
        v-if="list && list.length"
        class="dept-group-overview__carousel"
        height="calc(100% - 32px)"
        :autoplay="true"
        indicator-position="outside"
      >
        <el-carousel-item class="dept-group-overview__carousel-item" v-for="i in Math.ceil(list.length / 2)" :key="i">
          <div
            class="dept-group-overview__item group-item"
            :style="{ 0: 'margin-right: 10px;', 1: 'margin-left: 10px;' }[index]"
            v-for="(item, index) in list.slice((i - 1) * 2, i * 2)"
            :key="item.groupId"
          >
            <div class="group-item__title">{{ item.groupName }}</div>
            <div class="group-item__body">
              <div
                class="group-item__index-item"
                v-for="(item2, index2) in item.content"
                :key="index2"
                :class="{ 'border-bottom': [6, 7].includes(index2) }"
              >
                <span class="group-item__index-item--left">{{ item2[0] }}</span>
                <span class="group-item__index-item--right">{{ item2[1] }}</span>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="dept-group-overview__no-data" v-else>暂无数据</div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptGroupOverview',

  data() {
    return {
      list: [],
    }
  },

  props: {
    /**
     * 部门ID
     */
    organId: { type: String, default: '' },
  },

  methods: {
    /**
     * @function 班组概况
     * @param {String} organId -部门ID
     */
    queryDeptGroupOverview(organId) {
      if (!organId) return

      dashboardDeptApi.queryDeptGroupOverview({ organId }).then((res) => {
        this.list = res.content || []
      })
    },
  },

  mounted() {
    this.queryDeptGroupOverview(this.organId)
  },

  watch: {
    organId(newVal) {
      this.queryDeptGroupOverview(newVal)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>

<style lang="scss">
.default {
  .el-carousel {
    &__button {
      width: 8px;
      height: 8px;
      background-color: #e8ecf0;
      border-radius: 3px;
    }
    &__indicators {
      &--outside {
        button {
          opacity: 1;
        }
      }
    }
    &__indicator.is-active {
      button {
        width: 41px;
        background-color: #287def;
      }
    }
  }
}
</style>
